import React, { PropTypes } from 'react';
import { Breadcrumb,Tree,Table,Button, Form,Row,InputNumber,Switch, Input,Select, DatePicker, Col} from 'antd';
const TreeNode = Tree.TreeNode;
const FormItem = Form.Item;
const InputGroup = Input.Group;
const Option = Select.Option;

import { connect } from 'react-redux'
import { showMask } from '../../action/mask';

import '../less/paybill.less';

const columns = [{
  title: '序号',
  dataIndex: 'index',
}, {
  title: '操作',
  dataIndex: 'option',
  render(text,record,index){
      return <a href="" style={{color:'red'}}>删除</a>
  }
}, {
  title: '名称',
  dataIndex: 'name',
}, {
  title: '数量',
  dataIndex: 'number',
}, {
  title: '条码',
  dataIndex: 'code',
}, {
  title: '拼音码',
  dataIndex: 'pinyin',
}];

const data = [];
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    index:i+1,
    number: i+1,
    name:'物业费',
    code:`num00${i}`,
    pinyin:`num00${i}`
  });
}

const dataSource2 = [{
  key: '1',
  name: '胡彦斌',
  age: 32,
  address: '西湖区湖底公园1号'
}, {
  key: '2',
  name: '胡彦祖',
  age: 42,
  address: '西湖区湖底公园1号'
}, {
  key: '3',
  name: '胡彦祖',
  age: 42,
  address: '西湖区湖底公园1号'
}, {
  key: '4',
  name: '胡彦祖',
  age: 42,
  address: '西湖区湖底公园1号'
}];

const columns2 = [{
  title: '姓名',
  dataIndex: 'name',
  key: 'name',
}, {
  title: '年龄',
  dataIndex: 'age',
  key: 'age',
}, {
  title: '住址',
  dataIndex: 'address',
  key: 'address',
}];

const pagination = {
  total: data.length,
  showSizeChanger: true,
  onShowSizeChange(current, pageSize) {
    console.log('Current: ', current, '; PageSize: ', pageSize);
  },
  onChange(current) {
    console.log('Current: ', current);
  },
};

class ClearingApply extends React.Component {
  constructor() {
    super();
    this.state = {
    };
  }
  componentDidMount() {

  }
  render() {
    return (
      <div className="ptrContainer">
          <Row>
            <Col span={14}>
                <div className="ptrHead">
                    <Form inline>
                        <FormItem
                          label="结算起止时间"
                        >
                            <DatePicker />
                        </FormItem>
                        <FormItem>
                            <DatePicker />
                        </FormItem>
                    </Form>
                </div>
                <div className="ptrTable">
                  <Table columns={columns} dataSource={data} pagination={pagination}/>
                </div>
            </Col>
            <Col span={10} style={{paddingLeft:20}}>
              <div className="ptrHead ptrBorder">
                  结算信息
              </div>
              <div className="ptrSubHead">
                  结算金额
              </div>
              <div className="ptrForm" style={{paddingTop:10}}>
                <Form horizontal className="ant-advanced-search-formT">
                <Row gutter={16}>
                  <Col sm={24}>
                    <FormItem
                      label="商品条码"
                      labelCol={{ span: 6 }}
                      wrapperCol={{ span: 18 }}
                      required
                    >
                      <Input size="default" />
                    </FormItem>
                  </Col>
                </Row>
                </Form>
              </div>
              <div className="ptrSubHead">
                  附言
              </div>
              <div className="ptrForm" style={{paddingTop:10}}>
                <Form horizontal className="ant-advanced-search-formT">
                <Row gutter={16}>
                  <Col sm={24}>
                    <FormItem
                      label="商品条码"
                      labelCol={{ span: 6 }}
                      wrapperCol={{ span: 18 }}
                      required
                    >
                      <Input type='textarea' size="default" autosize={{minRows:3,maxRows:5}}/>
                    </FormItem>
                  </Col>
                </Row>
                </Form>
              </div>
              <div className="ptrBtn">
                <Button type="ghost">取消</Button>
                <Button type="primary" style={{marginLeft:10}}>结算</Button>
              </div>
            </Col>
          </Row>
      </div>
    );
  }
}

export default ClearingApply
